<template>
	<view class="container">
		<view class="search-fixed">
			<view class="search">
				<uv-search shape="square" placeholder="请输入搜索型号" v-model="model" @custom="search" :showAction="true" bgColor="#fff" actionText="搜索" :actionStyle="actionStyle" @click="search" :animation="false">
				</uv-search>

				<view class="search-param">
					<view class="search-param-item">
						<uv-input v-model="innerDiameter" placeholder="内径" shape="square" border="surround"
							:clearable="true" :customStyle="inputStyle" placeholderStyle="font-size: 24rpx;color: #909399;"
							fontSize="12" @confirm="search"></uv-input>
					</view>
					<view class="search-param-item">
						<uv-input v-model="outerDiameter" placeholder="外径" shape="square" border="surround"
							:clearable="true" :customStyle="inputStyle" placeholderStyle="font-size: 24rpx;color: #909399;"
							fontSize="12" @confirm="search"></uv-input>
					</view>
					<view class="search-param-item">
						<uv-input v-model="width" placeholder="宽度" shape="square" border="surround" :clearable="true"
							:customStyle="inputStyle" placeholderStyle="font-size: 24rpx;color: #909399;" fontSize="12"
							@confirm="search"></uv-input>
					</view>
				</view>
			</view>
		</view>
		<view class="content-wrapper">
			<uv-empty v-if="dataList.length == 0" mode="data" text="请输入搜索关键字" marginTop="50">
				<view class="empty-tips">
					<view class="tips-card">
						<view class="tip-section">
							<uv-icon name="info-circle" color="#fe5400" size="18"></uv-icon>
							<text class="tip-section-title">温馨提示</text>
						</view>
						<view class="tip-content">
							<uv-text :text="tipsData.score_num_text" color="#666" size="13"></uv-text>
						</view>
					</view>

					<view class="tips-card">
						<view class="tip-section">
							<uv-icon name="gift" color="#fe5400" size="18"></uv-icon>
							<text class="tip-section-title">积分获取方式</text>
						</view>
						<view class="tip-content-list">
							<view class="tip-content-item">
								<uv-icon name="checkmark-circle" color="#19be6b" size="14"></uv-icon>
								<uv-text :text="tipsData.register_score_num_text" color="#666" size="13"></uv-text>
							</view>
							<view class="tip-content-item">
								<uv-icon name="checkmark-circle" color="#19be6b" size="14"></uv-icon>
								<uv-text text="签到可得积分 > 签到指引 我的-签到" color="#666" size="13"></uv-text>
							</view>
							<view class="tip-content-item">
								<uv-icon name="checkmark-circle" color="#19be6b" size="14"></uv-icon>
								<uv-text :text="tipsData.order_score_percent_text" color="#666" size="13"></uv-text>
							</view>
						</view>
					</view>
				</view>
			</uv-empty>
			<view class="products">
				<view v-for="(item, index) in dataList" :key="item.id">
					<view class="product">
						<view class="product-image">
							<uv-image shape="circle" :src="item.image" width="140rpx" height="140rpx"></uv-image>
						</view>
						<view class="product-info">
							<view class="product-model">
								<text>型号: {{ item.model }}</text>
							</view>
							<view class="product-brand">
								<text>品牌: {{ item.brand_name }}</text>
							</view>
							<view class="product-param">
								<text v-for="(value, key) in item.details" :key="key">
									{{ key }}: {{ value }}
								</text>
							</view>
						</view>
					</view>
					<uv-line></uv-line>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			model: '',
			innerDiameter: '',
			outerDiameter: '',
			width: '',
			inputStyle: {
				"background": "#FFFFFF"
			},
			actionStyle:{
				"color": '#ffffff',
			},
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			},
			num: this.$store.state.common.appConfig.spec_score_num,
			tipsData :{
				score_num: this.$store.state.common.appConfig.spec_score_num,
				score_num_text:"参数查询需消耗积分，"+this.$store.state.common.appConfig.spec_score_num+"积分/次",
				register_score_num: this.$store.state.common.appConfig.register_score_num,
				register_score_num_text:"注册即送"+this.$store.state.common.appConfig.register_score_num+"积分",
				order_score_percent: this.$store.state.common.appConfig.order_score_percent,
				order_score_percent_text: "下单可得积分 > 获得比例"+this.$store.state.common.appConfig.order_score_percent+"%(支付1000元可得"+parseInt(1000/this.$store.state.common.appConfig.order_score_percent)+"积分)",
				money: 1000,
				score: parseInt(1000/this.$store.state.common.appConfig.order_score_percent)
			}
		};
	},
	onLoad() {

	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		search() {
			this.loadData('search')
		},
		loadData(type) {
			let that = this;
			if (type != undefined) {
				uni.showModal({
					title: '温馨提示',
					content: '本次搜索将消耗' + this.num + '个积分!',
					success: function (res) {
						if (res.confirm) {
							that.doLoadData(type)
						}
					}
				});
			} else {
				that.doLoadData(type)
			}
		},
		async doLoadData(type) {
			uni.showLoading({
				title: '加载中'
			});
			await uni.request({
				url: '/wanlshop.user/searchSpec',
				method: 'POST',
				data: {
					page: this.current_page,
					model: this.model,
					inner_diameter: this.innerDiameter,
					outer_diameter: this.outerDiameter,
					width: this.width,
				},
				success: res => {
					uni.stopPullDownRefresh();
					this.dataList = type === 'search' ?
						res.data.data :
						this.reload ?
							res.data.data :
							this.dataList.concat(res.data.data);
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
					uni.hideLoading();
				}
			});
		}
	}
}
</script>

<style>
page {
	background: #FFFFFF;
}

.uv-input {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
	padding-left: 4px !important;
	padding-right: 4px !important;
}

.uv-border {
	border-width: 0rpx !important;
	border-color: #FFFFFF !important;
	border-style: none !important;
}
</style> 

<style lang="scss">
.container {
	padding-top: 180rpx; /* 为固定搜索框留出空间 */
}

.search-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #fe5400;
	padding: 30rpx 20rpx;
	z-index: 999;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.search {
	.search-param {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;

		.search-param-item {
			width: 32%;
		}
	}
}

.content-wrapper {
	/* 内容区域样式保持不变 */
}

.product {
	padding: 40rpx 20rpx 20rpx;
	display: flex;

	.product-image {
		flex-shrink: 0;
		
		image {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.product-info {
		flex: 1;
		margin-left: 20rpx;

		.product-model {
			text {
				font-weight: bold;
				font-size: 28rpx;
			}
		}

		.product-brand {
			color: #636363;
			font-size: 24rpx;
			padding: 10rpx 0;
		}

		.product-param {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;
			color: #636363;
			font-size: 24rpx;

			text {
				padding: 0rpx 20rpx 20rpx 0rpx;
			}
		}
	}
}

/* 其他样式保持不变 */
.empty-tips {
	padding: 20rpx 40rpx;
	width: 100%;

	.tips-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

		&:last-child {
			margin-bottom: 0;
		}

		.tip-section {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.tip-section-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #333;
				margin-left: 10rpx;
			}
		}

		.tip-content {
			padding-left: 30rpx;
		}

		.tip-content-list {
			padding-left: 30rpx;

			.tip-content-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 15rpx;

				&:last-child {
					margin-bottom: 0;
				}

				text {
					margin-left: 10rpx;
				}
			}
		}
	}
}
</style>